@mixin mat-icon-size($size: 24px) {
    font-size: $size;
    height: $size;
    width: $size;
    min-width: $size;
    min-height: $size;
    line-height: $size;
}

:host {

    .collapsed & {

        .nav-link {
            justify-content: center;

            > .nav-link-title,
            > .nav-link-badge {
                display: none;
                opacity: 0;
                transition: opacity 200ms ease;
            }

            .nav-link-icon {
                margin-right: 0;
                @include mat-icon-size(22px);
            }

            &:hover {
                .nav-link-icon {
                    display: none;
                }

                .nav-link-title {
                    display: block;
                    opacity: 1;
                    width: 90px;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
